<template>
    <div class="main-container">
        <div style="background-color: #fff; height:100%" id="Information">
            <a-tabs   :lazy-load="true" :default-active-key="1"  @change="tabsChange" justify>
                <a-tab-pane title="物料大类" :key="1">
                    <div style="height: 100%">
                        <Categories></Categories>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="物料小类" :key="2">
                    <div style="height: 100%">
                        <SmallClass></SmallClass>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="物料列表" :key="3">
                    <div style="height: 100%">
                        <ListMaterials></ListMaterials>
                    </div>
                </a-tab-pane>
            </a-tabs>
        </div>
    </div>
</template>

<script lang="ts">
    import {defineComponent, reactive, ref, onMounted} from 'vue'
    import ListMaterials from './components/ListMaterials.vue'
    import SmallClass from './components/SmallClass.vue'
    import Categories from './components/Categories.vue'
    import emitter from '@/hooks/useEventBus'


    export default defineComponent({
        name: 'Information',
        components:{ListMaterials,SmallClass,Categories},
        setup() {
            const pageData = reactive({
                tableIndex: "1"
            })
            const tabsChange = (e: string | number) => {
                emitter.emit('window-change')
                if (e ===1) {
                    emitter.emit('Categories')
                }else if(e ===2){
                    emitter.emit('SmallClass')
                }else if(e ===3){
                    emitter.emit('ListMaterials')
                }
            }
            return {
                pageData,
                tabsChange
            }
        }
    })
</script>
<style scoped lang="less">
    .main-container {
        height: 100%;
    }

</style>